<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游攻略群</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../../bootstrap-5.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="index.css">
</head>
<body class="bg-light">
    
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top rounded-4 mb-1">
        <div class="container">
            <a class="navbar-brand fw-bold" href="../index/index.html">
                <i class="bi bi-compass me-2"></i>旅游网
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../index/index.html"><i class="bi bi-house-door me-1"></i>首页</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="#"><i class="bi bi-map me-1"></i>目的地</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../gl/index.html"><i class="bi bi-journal-text me-1"></i>攻略群</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" target="_blank" href="../index/Popular_travelogues/Popular_travelogues.html"><i class="bi bi-people me-1"></i>社区</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <div class="input-group">
                        <input type="search" class="form-control shadow-none" placeholder="搜索目的地..." aria-label="Search">
                        <button class="btn btn-light" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        <!-- 导航标签 -->
        <ul class="nav nav-tabs mb-4 border-0">
            <li class="nav-item">
                <button class="nav-link active" id="domestic-tab" data-bs-toggle="tab" data-bs-target="#domestic" type="button">国内</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="international-tab" data-bs-toggle="tab" data-bs-target="#international" type="button">国外</button>
            </li>
        </ul>
        
        <!-- 标签内容 -->
        <div class="tab-content">
            <!-- 国内内容 -->
            <div class="tab-pane fade show active" id="domestic">
                <div class="row g-4" id="domestic-content">
                    <!-- 初始卡片将通过JavaScript加载 -->
                </div>
                
                <!-- 加载更多 -->
                <div class="text-center my-4 d-none" id="domestic-loader">
                    <div class="spinner-border text-danger loader" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="text-muted mt-2">正在加载更多...</p>
                </div>
            </div>
            
            <!-- 国外内容 -->
            <div class="tab-pane fade" id="international">
                <div class="row g-4" id="international-content">
                    <!-- 初始卡片将通过JavaScript加载 -->
                </div>
                
                <!-- 加载更多 -->
                <div class="text-center my-4 d-none" id="international-loader">
                    <div class="spinner-border text-danger loader" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="text-muted mt-2">正在加载更多...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4 mb-md-0">
                    <h5><i class="bi bi-compass me-2"></i>旅游网</h5>
                    <p class="mb-2">提供最专业的旅游攻略和社区服务</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-3"><i class="bi bi-facebook fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-twitter fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-instagram fs-4"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-wechat fs-4"></i></a>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="list-inline footer-links mb-3">
                        <li class="list-inline-item me-3"><a href="#">关于我们</a></li>
                        <li class="list-inline-item me-3"><a href="#">隐私政策</a></li>
                        <li class="list-inline-item me-3"><a href="#">使用条款</a></li>
                        <li class="list-inline-item"><a href="#">联系我们</a></li>
                    </ul>
                    <p class="mb-0 small">
                        © 2025 旅游网. 23软件技术2班. 版权所有 
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <script src="../../bootstrap-5.3.6-dist/js/bootstrap.js"></script>
    <script src="index.js"></script>
</body>
</html>